{% extends "front/base.html" %}

{% block title %}
  发布内容
{% endblock %}

{% block head %}
  <!-- 引入wangEditor的JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
  <!-- 引入自定义的JavaScript -->
  <script src="{{ url_for('static', filename='front/js/public_post.js') }}"></script>

  <!-- 嵌入CSS来设置背景图片 -->
  <style>
    body {
      background-image: url('{{ url_for('static', filename='common/images/neza.jpg') }}');
      background-size: cover; /* 让背景图片覆盖整个页面 */
      background-position: center; /* 让背景图片居中 */
      background-repeat: no-repeat; /* 防止背景图片重复 */
    }

    /* 您可以根据需要添加其他样式 */
    .content-container {
      /* 假设您有一个容器来包裹表单内容，以防止背景图片影响表单的可读性 */
      background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  </style>

{% endblock %}

{% block body %}
  <!-- 添加一个容器来包裹表单，以便应用上面的样式 -->
  <div class="content-container">
    <h1 style="text-align: center;">发布内容</h1>
    <div class="mb-4"></div>
    <form action="" method="post">
      <div class="form-group">
        <label>标题</label>
        <input type="text" class="form-control" name="title">
      </div>
      <div class="form-group">
        <label>板块</label>
        <select name="board_id" class="form-control">
          {% for board in boards %}
            <option value="{{ board.id }}">{{ board.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label>内容</label>
        <div id="editor"></div>
      </div>
      <div class="form-group">
        <button class="btn btn-danger" id="submit-btn">发布内容</button>
      </div>
    </form>
  </div>
{% endblock %}